//本组件的自定义hooks
import { useEffect, useState } from 'react';
import { IPhoneColor, IPhoneVersion } from '../../typings';

/**
 * @description 本Hooks可以根据响应式cid数据找到符合的那一项当前颜色的手机
 * @param colorGroup 颜色数组
 * @param colorId 响应式cid
 */
function useColor(colorGroup: IPhoneColor[], colorId: number): IPhoneColor {
  //声明一个响应式的状态 默认值为colorGroup[0]
  const [currentColor, setCurrentColor] = useState<IPhoneColor>(colorGroup[0]);

  useEffect(() => {
    const _currentColor = colorGroup.find((color) => color.cid === colorId);

    //找到符合项时
    if (_currentColor) {
      //将其变为响应式
      setCurrentColor(_currentColor);
    }
  }, [colorGroup, colorId]);

  return currentColor;
}

/**
 * @description 本Hooks可以根据响应式vid数据找到符合的那一项当前版本的手机
 * @param versionGroup 版本数组
 * @param versionId 响应式vid
 */
function useVersion(
  versionGroup: IPhoneVersion[],
  versionId: number
): IPhoneVersion {
  //声明一个响应式的状态 默认值为versionGroup[0]
  const [currentVersion, setCurrentVersion] = useState<IPhoneVersion>(
    versionGroup[0]
  );

  useEffect(() => {
    const _currentVersion = versionGroup.find(
      (version) => version.vid === versionId
    );

    //找到符合项时
    if (_currentVersion) {
      //将其变为响应式
      setCurrentVersion(_currentVersion);
    }
  }, [versionGroup, versionId]);

  return currentVersion;
}

export { useColor, useVersion };
